<template>
   <div class="sub-container">
       <div class="dialog-center">
           <h1>Hello，<span>{{userName}}</span></h1>
           <h1>请选择您要批改的科目</h1>
           <el-form>
               <el-form-item label="请选择批阅试卷份">
                   <el-select placeholder="选择省份" v-model="currentProvince">
                       <el-option v-for="province in provinceList"
                                  :key="province.province"
                                  :value="province.province"
                                  :label="province.province">
                       </el-option>
                   </el-select>
               </el-form-item>
           </el-form>
           <div class="btns">
               <!-- course: 素描、色彩、速写、设计  -->
               <el-button class="sketch" @click="selectSubject('素描')">素描</el-button>
               <el-button class="color" @click="selectSubject('色彩')">色彩</el-button>
               <el-button class="sketch2" @click="selectSubject('速写')">速写</el-button>
               <el-button class="design" @click="selectSubject('设计')">设计</el-button>
           </div>
       </div>
   </div>
</template>

<script>
    import provinceCodeList from "../../utils/provinceCode";
    export default {
        name: "selectSubject", 
        data: () => {
            return {
                userName: '李老师',
                currentProvince: '',
                provinceList: provinceCodeList
            }
        },
        methods: {
            selectSubject (subject) {
                if (!this.currentProvince) {
                    this.$message.error('请选择省份')
                    return
                }
                console.log(subject)
                // 跳转到考卷列表页 需要传递份和科目两个参数
                this.$router.push(`/paperManage/${this.currentProvince}/${subject}`)
            }
        },
        created() {
            const userInfo = JSON.parse(window.sessionStorage.getItem('user'))
            this.userName = userInfo.name
        }
    }
</script>

<style lang="scss">
    .dialog-center{
        .el-form{
            .el-form-item{
                width: 370px;
                .el-form-item__label{
                    font-weight: bold;
                    color: #000;
                }
            }
        }
    }
</style>

<style scoped lang="scss">
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .sub-container{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 230px;
        right: 0;
        background-image: url("../../assets/marking-bg.png");
        background-position: center;
        background-size: cover;
        .dialog-center{
            padding: 20px;
            border-radius: 10px;
            background-color: #fff;
            h1{
                margin-top: 0;
                margin-bottom: 10px;
            }
            .btns{
                text-align: center;
                button{
                    color: #fff;
                }
                .sketch{
                    background-color: #59BF99;
                }
                .color{
                    background-color: #557DFF;
                }
                .sketch2{
                    background-color: #DE5887;
                }
                .design{
                    background-color: #FFAC59;
                }
            }
        }
    }
</style>